<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>

  import echarts from 'echarts';
  import chinaJson from 'echarts/map/json/china.json';
  require('echarts/theme/macarons');
  import resize from '@/views/dashboard/mixins/resize';
  import { getStaffProvinceChartMap } from "@/api/site/labour/chart";

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '300px'
      },
      institutionCode: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        chart: null,
        data: [],
      }
    },
    watch: {
      institutionCode: {
        deep: true,
        handler(val) {
          this.institutionCode = val;
          this.setOptions();
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart();
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.setOptions();
      },
      setOptions() {
        this.data = [];
        getStaffProvinceChartMap({institutionCode: this.institutionCode}).then(response => {
          this.data = response.data;
          this.chart = echarts.init(this.$el, 'macarons');
          echarts.registerMap("china", chinaJson);
          let option = {
            tooltip: {
              trigger: 'item',
              formatter: function(v) {
                let name = v.name;
                let value = 0;
                if (v.value) {
                  value = v.value;
                }
                let text = name + '<br/>' + value + '（人）';
                return text;
              }
            },
            toolbox: {
              show: true,
              orient: 'vertical',
              left: 'right',
              top: 'center',
              feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
              }
            },
            visualMap: {
              min: 0,
              max: 200,
              text: ['高', '低'],
              realtime: false,
              calculable: true,
              inRange: {
                color: ['lightskyblue', 'yellow', 'orangered']
              }
            },
            series: [
              {
                name: '劳务工分布图',
                type: 'map',
                map: 'china',
                label: {
                  show: false
                },
                nameMap: {
                  '北京': '北京市',
                  '天津': '天津市',
                  '河北': '河北省',
                  '山西': '山西省',
                  '内蒙古': '内蒙古',
                  '辽宁': '辽宁省',
                  '吉林': '吉林省',
                  '黑龙江': '黑龙江',
                  '上海市': '上海市',
                  '江苏': '江苏省',
                  '浙江': '浙江省',
                  '安徽': '安徽省',
                  '福建': '福建省',
                  '江西': '江西省',
                  '山东': '山东省',
                  '河南': '河南省',
                  '湖北': '湖北省',
                  '湖南': '湖南省',
                  '广东': '广东省',
                  '广西': '广西壮族自治区',
                  '海南': '海南省',
                  '重庆市': '重庆市',
                  '四川': '四川省',
                  '贵州': '贵州省',
                  '云南': '云南省',
                  '西藏': '西藏自治区',
                  '陕西': '陕西省',
                  '甘肃': '甘肃省',
                  '青海': '青海省',
                  '宁夏': '宁夏回族自治区',
                  '新疆': '新疆维吾尔自治区',
                  '台湾': '台湾省',
                  '香港': '香港特别行政区',
                  '澳门': '澳门特别行政区'
                },
                data: this.data
              }
            ]
          };
          this.chart.setOption(option);
          if (response.data.length == 0) {
            this.chart.showLoading({
              text: '暂无数据',
              showSpinner: false,
              textColor: '#808080',
              maskColor: 'rgba(255, 255, 255, 1)',
              fontSize: '26px',
              fontWeight: 'bold'
            })
          } else {
            this.chart.hideLoading();
          }
        });

      }
    }
  }

</script>
